<template>
    <div class="power-station-finance h100">
        <el-tabs v-model="activeName" class="finance-tabs h100" @tab-click="handleClick">
            <el-tab-pane
                v-for="item in tabsList"
                :key="item.name"
                :label="item.label"
                :name="item.name">
                <div v-if="item.name == 1">
                    <operatorAccount />
                </div>
                <div v-else-if="item.name == 2">
                    <operatorFinance />
                </div>
                <div v-else-if="item.name == 3">
                    <userFinance />
                </div>
                <div v-else-if="item.name == 4">
                    <financialTools />
                </div>
                <div v-else-if="item.name == 5">
                    <invoice />
                </div>
                <div v-else>
                    <recharge />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import operatorAccount from "./components/operatorAccount/index.vue";
import operatorFinance from "./components/operatorFinance/index.vue";
import userFinance from "./components/userFinance/index.vue";
import financialTools from "./components/financialTools/index.vue";
import invoice from "./components/invoice/index.vue";
import recharge from "./components/recharge/index.vue";
const activeName = ref(1)
const tabsList = ref([
    {
        label: '运营商账户总览',
        name: 1
    }, {
        label: '运营商财务',
        name: 2
    }, {
        label: '用户财务',
        name: 3
    }, {
        label: '财务工具',
        name: 4
    }, {
        label: '发票管理',
        name: 5
    }, {
        label: '充值退款管理',
        name: 6
    }
])
const handleClick = (tab, event) => {
    console.log(tab, event)
}
</script>

<style lang="scss" scoped>
.power-station-finance {
    .finance-tabs {
        :deep(.el-tabs__header) {
            height: 40px;
            margin-bottom: 0;
            .el-tabs__nav-wrap,
            .el-tabs__nav-scroll,
            .el-tabs__nav {
                height: 100%;
            }
            .el-tabs__active-bar {
                background-color: #F04142;
            }
            .el-tabs__nav-wrap::after {
                height: 0;
            }
            .el-tabs__item {
                font-weight: 500;
                font-size: 18px;
                color: $main-color;
            }
        }
        :deep(.el-tabs__content) {
            margin-top: 26px;
            max-height: calc(100% - 66px);
            overflow-y: auto;
            &::-webkit-scrollbar { width: 8px; border-radius: 5px; }
            &::-webkit-scrollbar-thumb { background: #CDCBCB; border-radius: 4px; }
            &::-webkit-scrollbar-thumb:hover { background-color: #555; }
        }
    }
}
</style>